import React from 'react'
import rank from './styles/ranking.module.css'

const header: string[] = [
    'https://revo.zongheng.com/www/2024/images/8df48f1.png',
    'https://revo.zongheng.com/www/2024/images/77e71dd.png',
    'https://revo.zongheng.com/www/2024/images/b51874d.png',
    'https://revo.zongheng.com/www/2024/images/9269490.png'
]

const rankBooks: Array<{url: string,name: string,auter: string, sort: number}> = [
    {
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },
    {
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    },{
        url:'https://static.zongheng.com/upload/s_image/cover/30/93/309398098f69f213f12b55ccac40ffac1698936785435.jpeg',
        name:'剑来',
        auter:'烽火戏诸侯',
        sort:57621
    }
]

const rankIcon: string[] = [
    'https://revo.zongheng.com/www/2024/images/1940777.png',
    'https://revo.zongheng.com/www/2024/images/e452c9d.png',
    'https://revo.zongheng.com/www/2024/images/65b1446.png'
]

const Rank: React.FC<{ type: number }> = ({ type }) => {
    return (
        <div className={rank.app}>
            <div className={rank.header}>
                {
                    <img src={header[type - 1]} alt="" />
                }
            </div>
            <div className={rank.body}>
                {
                    rankBooks.map((item,index) => (
                        <div key={index} className={rank.book_item}>
                            <div className={rank.item_ori_rank}>
                                <div className={rank.item_num}>
                                    { index < 3 ? <img src={rankIcon[index]} alt="" /> : <span>{index + 1 <= 9 && <span>0</span>}{index+1}</span> }
                                </div>
                                <div className={rank.item_info}>
                                    <div className={rank.item_name}>
                                        <div className={rank.item_name_text}>{item.name}</div>
                                        <div className={rank.item_name_text}>{item.sort}</div>
                                    </div>
                                    <div className={rank.item_info_other}>
                                        <div className={rank.other}>
                                            <div className={rank.other_left}>
                                                <div className={rank.other_text}>{item.name}</div>
                                                <div className={rank.other_txt}>{item.auter}</div>
                                                <div className={rank.other_txt}>热度{item.sort}</div>
                                            </div>
                                            <div className={rank.other_right}>
                                                <img src={item.url} alt="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default Rank